<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>百度输入法</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            text-align: center;
        }

        .div1 {
            width: 70px;
            margin: 20px auto;
        }

        #ime {
            margin-top: 5px;
            background: #fff;
            border: 1px solid #9a99ff;
            display: none;
        }

        #ime li {
            width: 100%;
            line-height: 24px;
            /* display: inline-block; */
            vertical-align: top;
            font-size: 12px;
        }

        #close {
            border-top: 1px solid #9a99ff;
        }

        #ime li a {
            color: #00c;
            text-align: left;
            padding-left: 5px;
            display: block;
            text-decoration: none;
        }

        #ime a:hover {
            background: #d9e1f6;
        }
    </style>
    <script>
        window.onload = function(){
            var oBut = document.getElementsByTagName("input")[0];
            var oIme = document.getElementById("ime");
            var close = document.getElementById("close");

            oBut.onclick = function(){
                oIme.style.display = oIme.style.display=="block" ? "none" : "block";
            }

            close.onclick = function(){
                oIme.style.display = "none";
            }
        }
    </script>
</head>

<body>
    <div class="div1">
        <input type="button" value="输入法">
        <ul id="ime">
            <li>
                <a href="#">手写</a>
            </li>
            <li>
                <a href="#">拼音</a>
            </li>
            <li id="close">
                <a href="#">关闭</a>
            </li>
        </ul>
    </div>
</body>

</html>